<template>
    <div>
        <div style="margin: 10px 0">
            <el-input style="width: 200px" placeholder="请输入日志标题" suffix-icon="el-icon-search"
                v-model="pagequery.title"></el-input>
            <el-input style="width: 200px" placeholder="请输入业务类型" suffix-icon="el-icon-menu"
                v-model="pagequery.businessType"></el-input>
            <el-button type="primary" @click="load">搜索</el-button>
            <el-button type="info" @click="reset">重置</el-button>
        </div>
        <div style="margin: 10px 0">
            <el-button type="danger" @click="delBatch">批量删除 <i class="el-icon-remove-outline"></i></el-button>
        </div>
        <el-table @selection-change="handleSelectionChange" :data="tableData" border stripe
            :header-cell-style="{ background: '#eee', color: '#000000' }">
            <el-table-column type="selection" width="68"></el-table-column>
            <el-table-column prop="id" label="ID" width="100"></el-table-column>
            <el-table-column prop="createBy" label="创建者" width="150"></el-table-column>
            <el-table-column prop="title" label="标题" width="200"></el-table-column>
            <el-table-column prop="url" label="访问URL" width="226"></el-table-column>
            <el-table-column prop="ipAddress" label="IP地址" width="150"></el-table-column>

            <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
            <el-table-column label="操作" width="250" align="center">
                <template v-slot:default="scope">
                    <el-button type="info" @click="handleDetails(scope.row)">详情 <i class="el-icon-info"></i></el-button>
                    <el-popconfirm title="确定要删除这条日志吗？" @confirm="del(scope.row.id)">
                        <el-button type="danger" slot="reference">删除 <i class="el-icon-delete"></i></el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pagequery.pageNum" :page-sizes="[5, 10, 20]" :page-size="pagequery.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <!-- Details Dialog -->
        <el-dialog title="日志详情" :visible.sync="detailsDialogVisible" width="70%">
            <el-form :model="detailsForm" label-width="120px" size="small">
                <el-form-item label="ID"> <span>{{ detailsForm.id }}</span> </el-form-item>
                <el-form-item label="标题"> <span>{{ detailsForm.title }}</span> </el-form-item>
                <el-form-item label="业务类型"> <span>{{ detailsForm.businessType }}</span> </el-form-item>
                <el-form-item label="包名称"> <span>{{ detailsForm.packageName }}</span> </el-form-item>
                <el-form-item label="类名称"> <span>{{ detailsForm.className }}</span> </el-form-item>
                <el-form-item label="方法名称"> <span>{{ detailsForm.methodName }}</span> </el-form-item>
                <el-form-item label="参数名"> <span>{{ detailsForm.argsName }}</span> </el-form-item>
                <el-form-item label="参数值"> <span>{{ detailsForm.argsValue }}</span> </el-form-item>
                <el-form-item label="异常类型"> <span>{{ detailsForm.exceptionName }}</span> </el-form-item>
                <el-form-item label="错误信息"> <span>{{ detailsForm.errMsg }}</span> </el-form-item>
                <el-form-item label="异常堆栈信息"> <span>{{ detailsForm.stackTrace }}</span> </el-form-item>
                <el-form-item label="IP地址"> <span>{{ detailsForm.ipAddress }}</span> </el-form-item>
                <el-form-item label="访问的URL"> <span>{{ detailsForm.url }}</span> </el-form-item>
                <el-form-item label="创建者"> <span>{{ detailsForm.createBy }}</span> </el-form-item>
                <el-form-item label="创建时间"> <span>{{ detailsForm.createTime }}</span> </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="detailsDialogVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import qs from "qs";
export default {
    data() {
        return {
            detailsDialogVisible: false,
            detailsForm: {},
            multipleSelection: [],
            form: {},
            tableData: [],
            total: 0,
            pagequery: {
                pageNum: 1,
                pageSize: 5,
                title: "",
                businessType: ""
            }
        };
    },
    methods: {
        reset() {
            this.pagequery = {
                pageNum: 1,
                pageSize: 5,
                title: "",
                businessType: ""
            };
            this.load();
        },
        load() {
            this.request.get("/syslog/page?" + qs.stringify(this.pagequery)).then(res => {
                if (res.code === 200) {
                    this.total = res.data.total;
                    this.tableData = res.data.records;
                    
                    this.tableData.forEach(SysLog => {
                        
                        console.log(" 日志id: " + SysLog.id + " 业务标题：" + SysLog.title + " 参数：" + SysLog. argsValue +
                            " 包名称: " + SysLog.packageName + " ip地址 ：", SysLog.ipAddress)
                    }
                    )
                }
            });
        },
        handleSizeChange(pageSize) {
            this.pagequery.pageSize = pageSize;
            this.load();
        },
        handleCurrentChange(pageNum) {
            this.pagequery.pageNum = pageNum;
            this.load();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleDetails(row) {
            this.detailsForm = { ...row };  // Assuming all details are in the row data
            this.detailsDialogVisible = true;
        },
        del(id) {
            this.request.delete("/syslog/" + id).then(res => {
                if (res) {
                    this.$message.success("日志删除成功");
                    this.load();
                } else {
                    this.$message.error("删除失败");
                }
            });
        },
        delBatch() {
            if (this.multipleSelection.length === 0) {
                this.$message.warning("请选择要删除的日志");
                return;
            }
            const ids = this.multipleSelection.map(v => v.id);
            this.request.post("/syslog/del/batch", ids).then(res => {
                if (res) {
                    this.$message.success("批量删除成功");
                    this.load();
                } else {
                    this.$message.error("批量删除失败");
                }
            });
        }
    },
    created() {
        this.load();
    }
};
</script>
